<template>
  <div>
    <div class="filmDetail">
      <div class="product" style="border-radius: 10px 10px 0 0">产品列表</div>
      <div class="table">
        <tr>
          <td>保底</td>
          <td>40个</td>
          <td>20个</td>
          <td>13个</td>
          <td>23个</td>
        </tr>
        <tr style="background-color: #eeeeee">
          <td>相框</td>
          <td>20个</td>
          <td>8个</td>
          <td>5个</td>
          <td>9个</td>
        </tr>
        <tr>
          <td>相册</td>
          <td>3个</td>
          <td>2个</td>
          <td>4个</td>
          <td>6个</td>
        </tr>
      </div>
      <div class="product" style="margin-top: 18px">产品明细</div>
      <div class="mingxi">61x33cm定制克拉相册 x30</div>
      <div class="mingxi">61x33cm定制克拉相册 x30</div>
      <div class="mingxi">61x33cm定制克拉相册 x30</div>
      <div class="mingxi">61x33cm定制克拉相册 x30</div>
      <div class="info">
        <div class="priceInfo">
          <div class="infoLeft" style="color: #00b890">优惠金额 ￥55</div>
          <div class="infoRigth" style="color: #f24242">需支付 ￥559</div>
        </div>
      </div>
      <div class="button">
        <div class="leftBtn">调整产品</div>
        <div class="rightBtn">支付</div>
      </div>
    </div>
    <div class="orderInfo">
      <div style="height: 50px;line-height: 50px;">订单信息</div>
      <div>订单编号：YQXP202345646464544</div>
      <div>创建时间：2023/05/06 10：21</div>
      <div>付款时间：2023/05/06 10：31</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
};
</script>

<style style scoped lang="less">
.filmDetail {
  margin: 0 auto;
  margin-top: 16px;
  width: 530px;
  min-height: 280px;
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 1);
  border: 1px solid rgba(187, 187, 187, 1);
}
.product {
  height: 50px;
  line-height: 50px;
  color: rgba(16, 16, 16, 1);
  font-size: 14px;
  text-align: center;
  background-color: rgba(238, 238, 238, 1);
  color: rgb(0, 184, 144);
  font-size: 16px;
}
.table {
  width: 96%;
  margin: 0 auto;
  margin-top: 20px;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
td {
  border-collapse: collapse;
  width: 80px;
  height: 50px;
  border: 1px solid #d0cece;
  text-align: center;
  line-height: 50px;
  font-size: 14px;
}
.mingxi {
  padding: 6px;
  height: 26px;
  line-height: 26px;
  color: rgb(55, 53, 53);
}
.info {
  margin-top: 18px;
  border-top: 1px solid rgba(164, 173, 179, 1);
  border-bottom: 1px solid rgba(164, 173, 179, 1);
}
.priceInfo {
  margin: 0 auto;
  width: 96%;
  height: 44px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.button {
  height: 70px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.leftBtn,
.rightBtn {
  text-align: center;
  width: 100px;
  height: 40px;
  line-height: 40px;
  border-radius: 4px;
  font-size: 14px;
}
.leftBtn {
  border: 1px solid rgba(65, 80, 88, 1);
  color: #415058;
  margin-right: 14px;
}
.rightBtn {
  border: 1px solid rgba(0, 184, 144, 1);
  color: #00b890;
}
.orderInfo {
  margin: 0 auto;
  text-align: center;
  font-size: 12px;
  color: #415058;
  line-height: 20px;
  padding-top: 12px;
  padding-bottom: 20px;
}
</style>